<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>吉林旅游</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="../lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="../css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css" />
		<style type="text/css">
			body {
				background-color: #F5F5F5;
			}
			
			.tour_main {
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
				height: 100%;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding: 6px;
			}
			
			.app_head_right a {
				margin-right: -5px;
			}
			
			.app_head_right a img {
				width: 31px;
			}
			
			.tour_mid {
				padding-top: 22px;
			}
			
			.tour_mid img {
				width: 100%;
				margin-bottom: 8px;
				border-radius: 10px;
			}
			/*导航栏样式*/
			
			.weui_bar_item_on {
				background-color: #FFFFFF !important;
				color: #0070B4 !important;
			}
			
			.weui_navbar_item {
				color: #FFFFFF;
				background-color: #CCCCCC;
			}
			
			.weui_navbar_item b {
				display: block;
				font-size: 1.1em;
				height: 1.25em;
				line-height: 1.25em;
			}
			
			.weui_navbar {
				width: 100%;
			}
			/* 搜索框区域样式 */
			
			.sec_line {
				width: 100%;
				background-color: #F5F5F5;
				padding: 5px 0px 7px 0;
				border-bottom: 1px solid #DEDEDE;
			}
			
			#InputLine {
				margin-left: 2%;
				margin-right: 2%;
				width: 96%;
				border: 1px solid #DEDEDE;
				border-radius: 7px;
				height: 44px;
				background-color: #FFFFFF;
				opacity: 0.92;
			}
			
			#tour_suggestId {
				padding-left: 1em;
				width: 89%;
				height: 100%;
				border: none;
				outline: medium;
				border-radius: 5px;
				color: #969696;
				font-size: 1.15em;
				font-weight: bold;
			}
			
			#searchBtn {
				display: block;
				float: right;
				width: 8.5%;
				padding-right: 10px;
				color: #666666;
				font-size: 2em;
				text-align: right;
				position: relative;
				left: -5px;
			}
			
			.glgg_ul li {
				height: 70px;
				padding: 5px 10px;
			}
			
			.glgg_ul li h1 {
				height: 50%;
				line-height: 35px;
				/*color: #398439;*/
				font-weight: bold;
				font-size: 1.13em;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.glgg_ul li p {
				text-align: right;
				height: 50%;
				line-height: 30px;
				/*color: #F43530;*/
			}
			
			.glgg_ul li:nth-child(2n) {
				background: -webkit-linear-gradient(left, #F43530, #0070B4);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, #F43530, #0070B4);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, #F43530, #0070B4);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, #F43530, #0070B4);
				/* 标准的语法 */
				color: #FFFFFF;
			}
			
			.glgg_ul li:nth-child(2n-1) {
				background: -webkit-linear-gradient(left, aliceblue, #FFFFFF);
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(right, aliceblue, #FFFFFF);
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(right, aliceblue, #FFFFFF);
				/* Firefox 3.6 - 15 */
				background: linear-gradient(to right, aliceblue, #FFFFFF);
				/* 标准的语法 */
				color: #666666;
			}
			/* 返回顶部按钮 */
			
			.returnTopBtn {
				position: fixed;
				right: 15px;
				bottom: 80px;
				width: 45px;
				height: 43px;
				border-radius: 8px;
				z-index: 9999;
				background-color: #CCCCCC;
				padding: 6px;
				opacity: 0.8;
			}
			/*公告详情的外层div*/
			
			.ggxqDiv {
				padding: 0 1em;
			}
			
			#tourMap strong {
				font-size: 1.22em;
			}
			/* loading样式 */
			
			#loadingSFZ {
				width: 8%;
				margin-left: 46%;
				margin-right: 46%;
				margin-top: 90px;
			}
			
			#noResult {
				width: 80%;
				margin-left: 10%;
				margin-right: 10%;
				margin-top: 90px;
				color: #444444;
				font-size: 2em;
				text-align: center;
			}
			
			footer li {
				width: 33.3%;
				position: relative;
				top: -3px;
			}
			
			footer li p {
				position: relative;
				top: -5px;
			}
			
			footer li:first-child img{
				width: 18%;
			}
			
			footer li:last-child img{
				width: 20%;
			}
			
			footer li p {
				position: relative;
				top: -5px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="bgImgDiv"></div>
		<div class="tour_main">
			<div class="index_head">
				<div class="app_head_left">
					<a onclick="tourReturnBtn()" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">公路公告</p>
				</div>
			</div>
			<div class="tour_mid">
				<div class="weui_tab">
					<!--选择步行公交自驾按钮区域-->
					<div class="weui_navbar" id="secTitle" style="display: none;">
						<a href="#tourPlace" id="tourPlaceBtn" class="weui_navbar_item weui_bar_item_on">
							<b>公告</b>
						</a>
						<a href="#tourMap" class="weui_navbar_item" id="tourMapBtn">
							<b>详情</b>
						</a>
					</div>
					<div class="weui_tab_bd">
						<div id="tourPlace" class="weui_tab_bd_item weui_tab_bd_item_active">
							<div class="sec_line">
								<div id="InputLine" style="margin-top: -1px;">
									<input type="text" id="tour_suggestId" maxlength="15" onkeyup="glggMhc(this)" onpaste="return false;" placeholder="请输入要查询的标题" />
									<!--<a id="delBtn" href="javascript:;" class="iconfont" style="display: none;">&#xe60b;</a>-->
									<a id="searchBtn" href="javascript:;" class="iconfont">&#xe709;</a>
								</div>
							</div>
							<ul id="tourPlace_Ul" class="glgg_ul">
								<!--DOM JS添加-->

							</ul>
							<img src="../img/taxi/loading_icon_1.gif" id="loadingSFZ" style="display: none;" />
							<h1 id="noResult" style="display: none;">搜索无结果</h1>
						</div>
						<div id="tourMap" class="weui_tab_bd_item">

						</div>
					</div>
				</div>
			</div>

			<footer>
				<li>
					<a href="../freeway.html" id="index01">
						<div>
							<img src="../img/freeway_foot/JHnotchoose.png" />
						</div>
						<p style="color: #8a8a8a;">计划阻断</p>
					</a>
				</li>
				<li>
					<a href="../freeway2.html">
						<div>
							<img src="../img/freeway_foot/timenotChoose.png" />
						</div>
						<p style="color: #8a8a8a;">限制信息</p>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<div>
							<img src="../img/freeway_foot/gl_iconChoose.png" />
						</div>
						<p style="color: #1296db;">公路公告</p>
					</a>
				</li>
			</footer>
		</div>
		<img src="../img/index/returnTop2.png" style="display: none;" class="returnTopBtn" />
		<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 添加百度地图
				//				var loadCount = 1;
				//				map.addEventListener("tilesloaded", function() {
				//					if(loadCount == 1) {
				//
				//					}
				//					loadCount = loadCount + 1;
				//				});
				var h = document.documentElement.clientHeight - 75;

				getAllTour();
			});
			//判断滚动条是否在顶部 并显示返回顶部图标
			window.onscroll = function() {
				var scroll_top = $(document).scrollTop();
				if(scroll_top != 0) {
					$(".returnTopBtn").show();
				} else if(scroll_top == 0) {
					$(".returnTopBtn").hide();
				}
			}
			//每当点击地图按钮的时候，页面都返回顶部
			$("#chooseMap").click(function() {
				$(window).scrollTop(0);
			});
			$(".returnTopBtn").click(function() {
				//				$(window).scrollTop(0);
				$("body").animate({
					scrollTop: 0
				}, 300)
			});

			$(".weui_navbar_item").click(function() {
				$(window).scrollTop(0);
			});

			//输入框输入信息触发事件
			var timeout;

			function glggMhc(tt) {
				$("#noResult").hide();
				$("#loadingSFZ").show();
				$("#tourPlace_Ul").html(""); //清空所有li
				var val = $(tt).val();
				var pattern = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
				if(val == "") {
					clearTimeout(timeout);
					timeout = setTimeout(function() {
						getAllTour("");
					}, 800);
				} else {
					if(!pattern.test(val)) {
						$.alert("只能输入中文、英文和数字", "提示", function() {
							$("#tour_suggestId").val("");
						});
					} else {
						$("#noResult").hide();
						$("#loadingSFZ").show();
						//输入框内容为空时 ul中显示所有收费站名称
						clearTimeout(timeout);
						timeout = setTimeout(function() {
							getAllTour(val);
						}, 800);
					}
				}

			}

			function getAllTour(inputVal) {
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "common_highway_info",
						"TNAME": inputVal //公告标题模糊查
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						$("#noResult").hide();
						$("#loadingSFZ").hide();
						if(data.MSG == "成功") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								d = eval(d);
								console.log(d);
								if(d.length == 0) {
									$("#noResult").show();
								} else {
									for(var i = 0; i < d.length; i++) {
										var r = d[i].RECID;
										var title = d[i].TITLE;
										var time = d[i].ISSUANCETIME.substr(0, 16);
										var li = $('<li data-r="' + r + '" onclick="jumpToGGXQ(this)"></li>');
										var h1 = $('<h1>' + title + '</h1>');
										var p = $('<p>发布日期  ' + time + '</p>');
										$(li).append(h1, p);
										$("#tourPlace_Ul").append(li);
									}
								}
							} else {
								errMD();
							}
						} else {
							$("#noResult").show();
						}
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			};

			function jumpToGGXQ(t) {
				var recid = $(t).attr("data-r");
				console.log(recid);
				$("#tourMapBtn").click();
				getGGXQ(recid);
			}

			function getGGXQ(recid) {
				$("#tourMap").html("");
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "common_highway_info_by_recid",
						"RECID": recid //查询单个公告的recid
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data.MSG);
						if(data.MSG == "成功") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								var xqMain = $('<div class="ggxqDiv">' + d + '</div>');
								$("#tourMap").append(xqMain);
							} else {
								errMD();
							}
						} else {
							$("#noResult").show();
						}
					},
					error: function(data) {
						$.alert("连接超时，请稍后再试", "提示");
					}
				});
			}

			//后退按钮
			function tourReturnBtn() {
				if($("#tourMapBtn").hasClass("weui_bar_item_on")) {
					$("#tourPlaceBtn").click();
				} else {
					window.location.href = "javascript:history.go(-1)";
				}
			}
		</script>
	</body>

</html>